<template>
    <div>
		<panle title='严禁词' content="严禁词"></panle>
        <!--标签-->
        <div>
			<el-page-header @back="goBack" content="严禁词">
			</el-page-header>
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="" name="first"> -->
                    <div class="first_content">
                        <!--筛选条件-->
                        <div class="shaixuan">
                            <div style="display: flex;">
                                <el-input placeholder="搜索关键词" ref="searchinput" v-model="searchinput" class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                                </el-input>
								<el-button @click="resetForm('searchinput')">重置</el-button>
                            </div>
							<el-button class="addshuziren_btn" type="danger" round @click="createdYanjinci">+创建严禁词</el-button>
                        </div>
					    <div class="first_table">
							<el-row>
								<el-col :span="24">
									<div class="yixuan">已选	{{multipleSelectioncount}} <el-button @click="piliangshanchu" type="text" perms="live:yanjinci:batch_del">批量删除</el-button></div>
								</el-col>
							</el-row>
							<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
							v-loading="loading" @selection-change="handleSelectionChange">
								<el-table-column type="selection" width="55"></el-table-column>
								<el-table-column prop="id" label="ID" width="55"></el-table-column>
								<el-table-column prop="name" label="严禁词组"></el-table-column>
								<el-table-column prop="createtime" label="创建时间"></el-table-column>
								<el-table-column prop="id" label="操作">
									<template slot-scope="scope">
										<PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="live:yanjinci:edit" @click="edit(scope.row)"></PersButton>
										<PersButton type="text" size="mini" icon="el-icon-delete" perms="live:yanjinci:del" label="删除" @click="del(scope.row)"></PersButton>
									</template>
								</el-table-column>
							</el-table>
							<div class="block">
								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
								:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
								:total="total">
								</el-pagination>
							</div>
					    </div>
					    <!--弹出层  添加数字人-->
					    <el-dialog v-dialogDrag :visible.sync="open" width="600px"  append-to-body :title="!form.id ? '创建严禁词' : '编辑严禁词'">
							<el-form ref="form" :model="form" :rules="rules" label-width="80px">
								<el-row>
									<el-col :span="24">
										<el-form-item label="严禁词" prop="name">
											<el-input style="width:50%" v-model="form.name" placeholder="请输入严禁词名称" size="small" />
										</el-form-item>
									</el-col>

								</el-row>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="open = false" size="small">取 消</el-button>
								<el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form')" size="small">确 定</el-button>
							</div>

						</el-dialog>
                    </div>
                <!-- </el-tab-pane>
            </el-tabs> -->
        </div>
    </div>
</template>

<script>
	import Panle from '@/components/Panle';
	import PersButton from '@/components/PersButton';
    import {getYanjinciData,createYanjinci,delYanjinci,editYanjinci,pldelYanjinci} from '@/api/live/yanjincigroup';
    
    export default {
		components: {
			Panle,
			PersButton
		},
		data() {
			return {
				groupid:this.$route.query.groupid,
				loading: false,
				tableData: [],
				multipleSelectioncount:0,
				multipleSelection:[],
				pageSize: 10, //一页显示多少条
				pageNumber: 1,
				total: 0, //总页数
				searchinput: '',
				fileList2:[],
				flagid2:'',
				filelist:[],
				dialogVisible: false,
				disabled: false,
                activeName: 'first',
				open: false,
				form: {
					"id": '',
					"groupid": this.$route.query.groupid,
					"name": "",
					"remark": '',
				},
				rules: {
					
					name: [{
						required: true,
						message: "类型不能为空",
						trigger: "blur"
					}],
					remark: [{
						required: true,
						message: "评论不能为空",
						trigger: "blur"
					}],
				},

				clickType: false,
				imgnum: 1, //选择图片数量
			}
		},
		created() {
			// 或者通过$route获取参数
			console.log(this.$route.query.id);
			this.groupid = this.$route.query.id;
			this.init2();
		},
		methods: {
			resetForm(formName) {
                this.searchinput='';
                this.init2();
            },
			goBack() {
				console.log('go back');
				this.$router.push({path:'/live/yanjincigroup'});
			},
            handleClick(tab, event) {
                console.log(tab, event);
            },
		init2: function() {
				this.loading = true;
				let _param = {
					"size": this.pageSize,
					"page": this.pageNumber,
					"groupid": this.$route.query.groupid,
					"input": this.searchinput,
				}
				getYanjinciData(_param).then((res)=>{
					console.log(res);
					this.tableData = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				})
			},
			search: function() {
				this.searchinput = this.searchinput;
				this.init2();
			},
			handleSizeChange: function(e) {
				console.log(e);
				this.pageSize = e;
				this.init2();
			},
			handleCurrentChange: function(e) {
				console.log(e);
				this.pageNumber = e;
				this.init2();
			},
			//已选
			handleSelectionChange: function(e) {
				console.log(e);
				let selectChang = []
				for (let item of e) {
					selectChang.push(item.id)

				}
				this.multipleSelection = selectChang;
				this.multipleSelectioncount = selectChang.length;
				console.log(selectChang);
			},
			//创建表单
			createdYanjinci:function(e){
				this.form = {
					"id": '',
					"name": '',
					"groupid": this.$route.query.groupid,
					"remark": "",
				},
				this.open = true;
			},
			//提交表单  创建 
			submitForm: function(e) {
				console.log(this.form);
				createYanjinci(this.form).then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.msgSuccess(res.msg);
						this.init2();
						this.open = false;
					} else {
						this.msgError(res.msg);
					}
				})
					
				
			},
			subEditForm:function(e){
				console.log(e);
				editYanjinci(this.form).then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.msgSuccess(res.msg);
						this.init2();
						this.open = false;
					} else {
						this.msgError(res.msg);
					}
				})
			},

			del: function(data) {
				this.$confirm('确定删除【' + data.name + '】严禁词吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let _param={
						'id':data.id
					}
					delYanjinci(_param).then((res) => {
						if (res.code == 200) {
							this.msgSuccess(res.msg);
							this.init2();
						} else {
							this.msgError(res.msg);
						}
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			edit: function(data) {

				this.form.id = data.id;
				let editForm = {
					"id": data.id,
					"name": data.name,
					"remark": data.remark,
					
				}
				Object.assign(this.form, editForm);
				this.open = true;
			},
			//批量删除
			piliangshanchu:function(e){
				this.$confirm('确定批量删除选中的严禁词吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let _param={
						'ids':this.multipleSelection
					}
					pldelYanjinci(_param).then((res) => {
						if (res.code == 200) {
							this.msgSuccess(res.msg);
							this.init2();
						} else {
							this.msgError(res.msg);
						}
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			

		}
	}

</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .shaixuan{
    display:flex;
	flex-flow:nowrap;
    align-content:center;
	margin-top: 15px;
  }

  .first_content{
	display:flex;
	flex-flow:nowrap;
	flex-direction:column;
	align-content:center;
  }

  .uploadcol {
		display: flex;
			flex-flow: column;
			width: 100px;
		}
	
  .uploadborder {
  	border: 1px dashed #d9d9d9;
  	border-radius: 6px;
  	/* cursor: pointer;
      position: relative;
      overflow: hidden; */
  	width: 100px;
  	height: 100px;
  }

  .addshuziren_btn{
	position: absolute;
    right: 0;
	margin-right: 20px;
  }

  .daorushuziren_btn{
	position: absolute;
    right: 0;
	margin-right: 160px;
  }

  .yixuan{
	margin: 20px;
	color: #787878;
  }

</style>